iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
自我挑戰組

Wordpress 外掛開發系列 第 11

「Wordpress 外掛開發」加入自己的靜態檔案 wp_regist_scripts/wp_enqueue_script

  • 分享至 

  • xImage
  •  

Update 18/1/21

赫然發現靜態檔案的這一篇忘記寫進css的部分,難怪覺得篇幅怪怪的,會在這個週末把css補齊,並且慢慢的網medium移動文章過去,並且加入新的內容。

在wordpress中,不只是後端,你還需要提供頁面給使用者去做使用,那麼就不可能是純粹的後端來做全部的cover,那麼我們有個更精準與官方的方式來實行這個,我在剛開始寫的時候是使用<script>來做,其實要找code並不容易,而且還有cache的問題更是麻煩..不管如何,雖然wordpress有提供inline的插入,但是我是完全不推薦使用的,我有個開發鐵則,只要在wordpress上使用到Javascript,將全部的script都regist,然後在要使用的時候加入(enqueue)。

註冊我們的script - wp_regist_scripts

我們的開始,先從註冊說起,regist_script可以將我們使用的javascript hook到自己定義的地方,以平常的的需求,我們在前端的頁面之中,需要有頁面的處理,就可以呼叫這個calling hook來做到,大家都是reuse到正確的檔案,一舉兩得。

function wporg_register_scripts() {
       wp_register_script(
             'wporg-your-script-id',                    // Unique name
             plugin_dir_url( __FILE__ ) . '/assets/script.js',   // URL to the file
             array(),                                  // Dependencies
             '1.0.0',                                  // Version
             true                                      // Output in Footer
       );
}
add_action( 'init', 'wporg_register_scripts' );

加入我們的script - wp_enqueue_script/wp_dequeue_script

而當你在已經將你的script註冊之後,當你的頁面需要,使用enqueue與dequeue來做到,匯入與刪除這個javascript hook,特別好用,在整體使用的邏輯更佳順暢,不管是處理模板,或是shortcode上,使用上可以更一致,也就不用每一次還需要regist的一次,畢竟regist這個hook佔的資源很稀少的。

wp_enqueue_script( 'wporg-your-script-id' );

wp_dequeue_script( 'wporg-your-script-id' );

而關於這上述幾個的重要性,在你的外掛之中,如果曾經沒人告訴過你,不要再寫script在你的template或是shortcode,現在我告訴你,不要寫,超級難維護且難找,讓大家用同一個function來處理這個javascript,不香嗎?而且找戰犯很容易,況且在script的部分,也可以處理快取,可以看看以下的評論給的範例,使用version來做處理。

function my_load_scripts($hook) {
 
    // create my own version codes
    $my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
    $my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
     
    // 
    wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );
    wp_register_style( 'my_css',    plugins_url( 'style.css',    __FILE__ ), false,   $my_css_ver );
    wp_enqueue_style ( 'my_css' );
 
}
add_action('wp_enqueue_scripts', 'my_load_scripts');

集中式管理

我們在使用上,不少會將script分散的匯入,但其實在開發的過程中,我們應該是要有autoloader的概念,將script一併的加入regist,會是較可以控制註冊的時間不會過晚的方式,而在呼叫的時節,我們也可能會使用同樣的方式,但是會加上特定的條件來注入不同的script,比如說has_shortcode來判斷是不是我們的shortcode,要不要加入script,而在載入的hook,推薦使用wp_enqueue_scripts來做。

function wporg_enqueue_gallery_scripts() {
       if ( is_singular() && has_shortcode( get_the_content(), 'gallery' ) {
             wp_enqueue_script( 'wporg-your-script-id' );
       }
}
add_action( 'wp_enqueue_scripts', 'wporg_enqueue_gallery_scripts' );

在地化的延伸 wp_localize_script

我們常常可以聽到l10n,是使用__來將特定的文字轉換成該特定的語言文字,而在php與javascript中,也是有提供這種互通的方式來處理,概念可以想像是兩個不同的scope要連接的橋樑,但使用起來更像是將陣列extract到script之中,很實用且可以讓本質也是在地化的函數,將php端的的參數傳過去,而也是不少人將前端在地化的實行方法,使用這個參數來達到,可以看到下面的介紹。

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
 
// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'some_number' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
 
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

那我們這邊使用Js來接的話,就會對照傳入的陣列資料出來,但是有個需要注意的點,他傳過去的都是string,如果你是要傳數字你需要特別去設定。

alert( object_name.some_string );
parseInt(object_name.some_number);

最後,我們都知道原先的wordpress使用了非常多的jquery,所以一直可以在定義錢號來設定,但在5.0後,可以看到gutenburg,是使用react打造的新武器,我很期待wordpress可以最後去jquery化,把完整的react帶進他每一個使用的優化,甚至是可以在它內部的部分做所有靜態檔案的優化,像是在網站也可以切換正式機與測試機的bundle,這才是給開發者真正的福音!

reference

wp_enqueue_script
wp_localize_script
Including CSS & JavaScript


上一篇
「Wordpress 外掛開發」個人隱私
下一篇
「Wordpress 外掛開發」使用post Type建立個微型圖書館 - Your Post Type
系列文
Wordpress 外掛開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言